<template>
  <div class="layout-container">
    <header class="header">
      <div class="logo">B海冷链商城</div>
      <nav class="nav">
        <a-menu mode="horizontal">
          <a-menu-item key="products">
            <router-link to="/customer/shop">商品</router-link>
          </a-menu-item>
          <a-menu-item key="orders">
            <router-link to="/customer/orders">订单</router-link>
          </a-menu-item>
          <a-menu-item key="account">
            <router-link to="/customer/account">账户</router-link>
          </a-menu-item>
        </a-menu>
      </nav>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

export default {
  name: 'CusLayout',
  setup() {

    const router = useRouter();

    onMounted(() => {
      if (sessionStorage.getItem('userid') === null || sessionStorage.getItem('role') !== 'customer') {
        message.info('请登录！');
        router.push({ name: 'Login' });
      }
    });
  },
};
</script>

<style src="../../assets/styles/cusLayout.css" scoped></style>